<template>
  <el-row :gutter="5">
    <el-col :span="5">
      <el-card>
        <el-button @click="updateInsert()">修改范围</el-button><br>
      </el-card>
      <el-divider></el-divider>
      <el-card>
        <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick" ></el-tree>
      </el-card>
    </el-col>
    <el-col :span="19">
      <el-card>
<!--        地图-->
        <baidu-map @rightclick="addDot" class="map" :center="center" :zoom="15" :scroll-wheel-zoom="true">
<!--          缩放工具-->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!--          点-->
          <bm-marker :position="dot"></bm-marker>
<!--          范围-->
          <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolygonPath"/>
        </baidu-map>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
  import Vue from 'vue'
  import BaiduMap from 'vue-baidu-map'
  import os from '../../../../src/api/logisticsmanagement/organization/organizationScope'

  // 注册所有的百度地图组件
  Vue.use(BaiduMap, {
    ak: 'HQ7GzsIr9jkNWsFY6fMOsChIW3NSMnRk'
  })
  export default {
    data() {
      return {
        // 点，机构位置
        dot: {},
        // 地图初始显示点
        center: {lng: 116.278841, lat: 39.836355},
        //范围
        polygonPath: [],
        //机构树
        list:[],
        // 设置树，名字，子集合
        defaultProps: {
          children: 'orgTreeDtoList',
          label: 'name'
        },
        // 查询树的条件
        data:{},
        // 你选择的机构的信息
        setLatLng:{
          id: ""
        }
      };
    },
    methods: {
      // 修改范围位置
      updatePolygonPath (e) {
        this.polygonPath = e.target.getPath()
      },
      // 点击机构触发
      handleNodeClick(obj) {
        this.center.lat = obj.pdCoreOrg.latitude
        this.center.lng = obj.pdCoreOrg.longitude
        this.setLatLng.id = obj.pdCoreOrg.id;
        // 解除绑定
        this.dot = JSON.parse(JSON.stringify(this.center));
        os.getAgencyScope(obj.pdCoreOrg.id).then(({data})=>{
          if(data.data.lngLat != null){
            this.polygonPath = data.data.lngLat
          }
        })
        this.polygonPath = []
      },
      // 获取机构树
      getTree(){
        os.queryCoreOrgAllInfo(this.data).then(({data})=>{
          this.dg (data.data)
          this.list = data.data
        })
      },
      // 递归设置机构名称
      dg (data) {
        if(data!=null){
          for (var i = 0; i < data.length; i++) {
            if (data[i].orgTreeDtoList.length > 0) {
              this.dg(data[i].orgTreeDtoList)
            }
            this.$set(data[i], 'name', data[i].pdCoreOrg.name)
          }
        }
      },
      // 右键地图添加点
      addDot(type){
        if(this.setLatLng.id !== ""){
          this.polygonPath.push(type.Bg)
        }
      },
      //修改或添加机构范围
      updateInsert(){
        if(this.setLatLng.id===""){
          this.$notify.error({
            title: '失败',
            message: '请选中机构'
          });
          return;
        }
        this.$store.commit("startAnimation",true);
        os.updateInsert(this.setLatLng.id, this.polygonPath).then(({data})=>{
          if(data.flag){
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
          }else {
            this.$notify.error({
              title: '失败',
              message: '修改失败'
            });
          }
          this.$store.commit("startAnimation",false);
        })
      }
    },
    created() {
      this.getTree()
    }
  };
</script>
<style>
  .map {
    width: 100%;
    height: 550px;
  }
</style>
